@extends('admin.layout.base')
@section('styles')
@endsection
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body panel-info">
            <el-form :model="form" ref="form" class="form" label-width="100px" >
                <div class="panel-header"> <div class="panel-title"> 基本信息 </div> </div>
                <div class="panel-main">
                    <el-form-item :rules="[{ required: true, message: '请填写标题', trigger: 'blur'}]" label="标题：" prop="title">
                        <el-input clearable v-model="form.title" placeholder="请填写标题"></el-input>
                    </el-form-item>
                    <el-form-item label="类目：" prop="cate_pid" :rules="[{ required: true, message: '请选择类目', trigger: 'blur'}]">
                        <el-cascader placeholder="请选择类目"
                                     separator=">"
                                     :options="categoys"
                                     expand-trigger="hover"
                                     v-model="form.cate_pid">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item :rules="[{ required: true, message: '请填写内容', trigger: 'blur'}]" label="内容：" prop="content">
                        <div id="editor"></div>
                    </el-form-item>
                    <el-form-item label="状态：" prop="status">
                        <el-radio-group v-model="form.status">
                            <el-radio :label="1" border>正常</el-radio>
                            <el-radio :label="2" border>锁定</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <el-form-item style="padding-left: 150px;margin-top: 50px">
                    <el-button type="primary" @click="update()">保 存</el-button>
                    <el-button @click="back()" style="margin-left: 50px">返 回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="{{ asset('neditor/neditor.config.js') }}" type="text/javascript" ></script>
    <script src="{{ asset('neditor/neditor.all.min.js') }}" type="text/javascript" > </script>
    <script src="{{ asset('neditor/neditor.service.js') }}" type="text/javascript" ></script>
    <script src="{{ asset('neditor/i18n/zh-cn/zh-cn.js') }}" type="text/javascript" ></script>
    <script src="{{ asset('neditor/third-party/browser-md5-file.min.js') }}" type="text/javascript" ></script>
    <script src="{{ asset('neditor/third-party/jquery-1.10.2.min.js') }}" type="text/javascript" ></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    info: {!! $info !!},
                    form:{id:"{{ $id }}", title:'', content:'', type:0, status:1},
                    categoys: {!! $categorys !!},
                    editor: null,
                }
            },
            created(){
                this.editor = UE.getEditor('editor');
                let that = this;
                if(this.form.id > 0){
                    this.form.cate_pid = this.info.cate_pid;
                    this.form.title = this.info.title;
                    this.form.content = this.info.content;
                    this.form.type = this.info.type;
                    this.form.status = this.info.status;
                    this.editor.ready(function(){
                        that.editor.setContent(that.form.content);
                    });
                }
                this.editor.ready(function(){
                    that.editor.setPlaceholder('请填写内容');
                });
            },
            methods: {
                //返回
                back(){
                    window.history.go(-1);
                },
                //更新
                update(){
                    this.form.content = this.editor.getContent();
                    this.form._token = "{{csrf_token()}}";
                    this.$refs['form'].validate((valid) => {
                        if(!this.form.content){
                            this.$refs.form.fields[1].error = "请填写内容";return false;
                        }
                        if (valid) {
                            let that = this;
                            $.post("{{ route('admin.help.update') }}",this.form,function (res) {
                                if(res.code){
                                    that.$message.error(res.msg);
                                }else{
                                    that.$message({
                                        type: 'success',
                                        duration: '1000',
                                        message: res.msg,
                                        onClose:() =>{
                                            window.history.go(-1);
                                        }
                                    });
                                }
                            },'JSON');
                        }
                    });
                },
            }
        });
    </script>
@endsection
